<template>
  <div v-if="sendTo" class="order-header-info">
    <table v-loading="loading" class="order-header-info-table">
      <tbody>
      <tr>
        <td width="45" rowspan="2">
          <img class="goods-img" :src="getGoodsPicture(getExtByKey(sendTo, 'goodsPicture'))" alt="商品图"/>
        </td>
        <td>订单号:{{ getExtByKey(sendTo, 'orderNo') }}({{ getExtByKey(sendTo, 'totalBalse') }}件)</td>
        <td>{{ getExtByKey(sendTo, 'business') }}|{{ getExtByKey(sendTo, 'service') }}</td>
        <td>服务费:{{ getExtByKey(sendTo, 'serviceMoney') }}</td>
        <td width="110" rowspan="2">

          <el-popover
            v-if="!isReadOnly"
            placement="bottom-end"
            width="100%"
            @show="showPopover"
            trigger="click">
            <el-badge
              slot="reference"
              :hidden="GET_IM_CHART_DIALOG_UN_READ_LENGTH(currentWorkerGroupIdArr) <= 0"
              :value="GET_IM_CHART_DIALOG_UN_READ_LENGTH(currentWorkerGroupIdArr)">
              <el-button>切换订单</el-button>
            </el-badge>
            <el-scrollbar>
              <div class="popover-order" v-loading="loading" style="max-height: 400px;">
                <table @click.prevent="changeGroupId(groupId)" :key="index"
                       v-for="(groupId, index) in currentWorkerGroupIdArr" class="order-header-info-table"
                       :class="{'active': groupId == sendTo}">
                  <tbody>
                  <tr>
                    <td width="45" rowspan="2">
                      <img class="goods-img" :src="getGoodsPicture(getExtByKey(groupId, 'goodsPicture'))"
                           alt="商品图"/>
                    </td>
                    <td>订单号:{{ getExtByKey(groupId, 'orderNo') }}({{ getExtByKey(groupId, 'totalBalse') }}件)</td>
                    <td>{{ getExtByKey(groupId, 'business') }}|{{ getExtByKey(groupId, 'service') }}</td>
                    <td>服务费:{{ getExtByKey(groupId, 'serviceMoney') }}</td>
                  </tr>
                  <tr>
                    <td>客户:{{ getExtByKey(groupId, 'consigneeName') }}({{ getExtByKey(groupId, 'consigneePhone') }})
                    </td>
                    <td colspan="3">{{ getExtByKey(groupId, 'consigneeAddress') }}</td>
                  </tr>
                  <tr>
                    <td colspan="4" class="last-message-td">
                      <el-badge
                        class="last-message-badge"
                        :hidden="GET_IM_CHART_DIALOG_UN_READ_LENGTH(groupId) <= 0"
                        :value="GET_IM_CHART_DIALOG_UN_READ_LENGTH(groupId)"
                        slot="reference">
                        <div class="last-message" v-html="GET_IM_CHART_DIALOG_LAST_MESSAGE(groupId)">最后一条消息</div>
                      </el-badge>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </el-scrollbar>
          </el-popover>
        </td>
      </tr>
      <tr>
        <td>客户: {{ getExtByKey(sendTo, 'consigneeName') }}({{ getExtByKey(sendTo, 'consigneePhone') }})</td>
        <td colspan="2">{{ getExtByKey(sendTo, 'consigneeAddress') }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import {getImUserExtByOrderNo} from '@/utils/im'
import {mapGetters, mapActions} from 'vuex'
import {dotData} from '@/utils'

export default {
  props: {
    orderInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      extMap: {}
    }
  },
  computed: {
    sendTo() {
      return this.groupId
    },
    currentWorkerGroupIdArr() {
      return this.currentWorker.groupIdArr || []
    },
    // 只读
    isReadOnly() {
      return this.IS_IM_READ_ONLY_GROUP_ID(this.sendTo)
    },
    ...mapGetters({
      GET_IM_CHART_EXT_MAP: 'GET_IM_CHART_EXT_MAP',
      groupId: 'GET_IM_CHART_DIALOG_GROUP_ID',
      getOrderNoByGroup: 'GET_IM_CHART_DIALOG_GROUP_ID_ORDER_NO',
      currentWorker: 'GET_IM_CHART_CURRENT_WORKER',
      GET_IM_CHART_DIALOG_LAST_MESSAGE: 'GET_IM_CHART_DIALOG_LAST_MESSAGE',
      GET_IM_CHART_DIALOG_UN_READ_LENGTH: 'GET_IM_CHART_DIALOG_UN_READ_LENGTH',
      IS_IM_READ_ONLY_GROUP_ID: 'IS_IM_READ_ONLY_GROUP_ID'
    })
  },
  watch: {
    sendTo: {
      handler(val, oldVal) {
        if (val === oldVal) {
          return
        }
        this.getExt(val)
      },
      immediate: true
    }
  },
  methods: {
    getExt(groupId) {
      let ext = this.GET_IM_CHART_EXT_MAP(groupId)
      if (!ext) {
        let orderNo = this.getOrderNoByGroup(groupId)
        if (orderNo) {
          this.loading = true
          getImUserExtByOrderNo(orderNo).then(ext => {
            if (ext !== false) {
              this.SET_IM_CHART_EXT_MAP({groupId, ext})
              this.$set(this.extMap, groupId, ext)
            }
          }).finally(_ => {
            this.loading = false
          })
        }
      } else {
        this.$set(this.extMap, groupId, ext)
      }
    },
    // 获取聊天组的额外信息
    getExtByKey(groupId, key) {
      const ext = this.extMap[groupId]
      if (ext) {
        return dotData(ext, key) || ''
      }
      return ''
    },
    // popover 显示前调用
    showPopover() {
      if (Array.isArray(this.currentWorkerGroupIdArr)) {
        this.currentWorkerGroupIdArr.forEach(v => {
          this.getExt(v)
        })
      }
      // 检查所有的groupId 是否有些， 无效的自动去除
      this.removeCloseGroup(this.currentWorkerGroupIdArr)
    },
    // 移除已关闭的groupIdArr
    removeCloseGroup(groupIdArr) {
      // 移除
      this.$ajax.post('/ms-message-im/easemob/check-group-list', {groupList: groupIdArr}).then(response => {
        const success = response.success
        let data = response.data
        if (success) {
          for (const groupId in data) {
            if (groupId && data[groupId] !== '1') {
              this.REMOVE_IM_CHART_DIALOG_GROUP_ID(groupId)
            }
          }
        }
      })
    },
    // 切换聊天组
    changeGroupId(groupId) {
      this.SET_IM_CHART_DIALOG_GROUP_ID(groupId)
    },
    getGoodsPicture(goodsPicture) {
      return `/api/ms-mongodb/file/download?fileId=${goodsPicture}`
    },
    ...mapActions([
      'SET_IM_CHART_DIALOG_GROUP_ID',
      'SET_IM_CHART_EXT_MAP'
    ])
  }
}
</script>
